<template>
  <div class="shiming">
    <div class="title">{{moban.platform_name}}订单管理与分销平台</div>
    <div class="shiming_con">
      <div class="title2">实名信息补充</div>
      <div class="ff">
        <div class="f1">店铺所属：</div>
        <div class="f2">
          <el-radio-group v-model="all.main_type">
              <el-radio :label="1">企业组织</el-radio>
              <el-radio :label="0">个人</el-radio>
            </el-radio-group>
        </div>
      </div>
      <div v-if="all.main_type == 1">
        <div class="ff">
          <div class="f1"><span style="color: #DD2727;">*</span>上传营业执照：</div>
          <div class="f2">
            <el-upload class="avatar-uploader" action="#" :on-change="uploadok" :auto-upload="false" :show-file-list="false">
              <el-button v-if="!all.credentials" size="small" type="primary">点击上传</el-button>
              <img :src="all.credentials" v-if="all.credentials" style="width: 100px;">
            </el-upload>
            <el-button v-if="all.credentials" size="small" type="text" @click="delimg">删除</el-button>
          </div>
        </div>
        <div class="ff">
          <div class="f1"><span style="color: #DD2727;">*</span>企业法人姓名：</div>
          <div class="f2">
            <el-input v-model.trim="all.id_card_name" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="ff">
          <div class="f1"><span style="color: #DD2727;">*</span>企业法人身份证号码：</div>
          <div class="f2">
            <el-input v-model.trim="all.id_card_num" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="ff">
          <div class="f1">支付宝实名认证：</div>
          <div class="f2">
            <el-button @click="zhifubao" size="small" :disabled="ing" v-if="status == 0"  type="primary">点击获取认证二维码</el-button>
            <!-- <div v-if="link" style="width: 400px; font-size: 14px; color: #999; margin-bottom: 10px;">如果没有自动打开认证页面，请点击复制连接手动到浏览器打开</div>
            <el-button @click="copys" size="small" v-if="status == 1" type="danger">复制</el-button> -->

            <qrcode style="margin-left: -20px;" :value="link" id="canvas" :options="{ size: 200 }" v-if="link != ''"></qrcode>
            <!-- <el-button @click="getrenzheng" size="small" v-if="status == 1" type="danger">认证完成后点击</el-button> -->
            <!-- <div v-if="status == 2">认证成功</div> -->
          </div>
        </div>
      </div>
      <div v-if="all.main_type == 0">
        <div class="ff">
          <div class="f1"><span style="color: #DD2727;">*</span>个人姓名：</div>
          <div class="f2">
            <el-input v-model.trim="all.id_card_name" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="ff">
          <div class="f1"><span style="color: #DD2727;">*</span>个人身份证号码：</div>
          <div class="f2">
            <el-input v-model.trim="all.id_card_num" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="ff">
          <div class="f1">支付宝实名认证：</div>
          <div class="f2">
            <el-button @click="zhifubao" size="small" :disabled="ing" v-if="status == 0"  type="primary">点击获取认证二维码</el-button>
            <!-- <div v-if="link" style="width: 400px; font-size: 14px; color: #999; margin-bottom: 10px;">如果没有自动打开认证页面，请点击复制连接手动到浏览器打开</div>
            <el-button @click="copys" size="small" v-if="status == 1" type="danger">复制</el-button> -->

            <qrcode style="margin-left: -20px;" :value="link" id="canvas" :options="{ size: 200 }" v-if="link != ''"></qrcode>
            <!-- <el-button @click="getrenzheng" size="small" v-if="status == 1" type="danger">认证完成后点击</el-button> -->
            <!-- <div v-if="status == 2">认证成功</div> -->
          </div>
        </div>
      </div>
      <div class="tijiao" @click="baocun">提交审核</div>
    </div>
  </div>
</template>

<script>
  import QRcode from '@xkeshi/vue-qrcode';
  import axios from "axios";
  export default {
    components:{
      qrcode : QRcode
    },
    name: "foot",
    data() {
      return {
        all:{
          main_type:1,
          id_card_name:"",
          id_card_num:"",
          credentials:"",
        },
        status:0,
        link:"",
        ing:false
      };
    },
    created() {

    },
    methods: {
      copys: function() {
      	var that = this
      	this.$copyText(this.link)
      		.then(
      			res => {
      				that.$message.success("复制成功");
      			}
      		);
      },
      getrenzheng:function(){
        axios.get('/api/gth/shop/identify/check')
        .then(response => {
          if (response.data.msg.code == 0) {
            //this.status = 2
          } else {
          	this.$message.error(response.data.msg.info);
          }
        })
      },
      zhifubao:function(){
        if(!this.all.id_card_name || !this.all.id_card_num){
          this.$message.error("姓名和身份证号必填");
          return false
        }
        this.ing = true
        axios.post('/api/system/ali/url2',{
          id_card_name:this.all.id_card_name,
          id_card_num:this.all.id_card_num,
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.link = response.data.data
            // window.open(response.data.data)
            this.status = 1
          } else {
          	this.$message.error(response.data.msg.info);
            this.ing = false
          }
        })
      },
      baocun:function(){
        if(this.all.main_type == 1){
          if(this.all.credentials == ''){
            this.$message.error('必须上传营业执照');
            return false
          }
        }
        axios.post('/api/plan-market/shop/identify',this.all)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$router.push('/login')
          } else {
          	this.$message.error(response.data.msg.info);
          }
        })
      },
      uploadok: function(file) {

      	if(file.raw.type != 'image/jpeg' && file.raw.type != 'image/png' && file.raw.type != 'image/jpg'){
      		this.$message.error('只能上传图片');
      		return false
      	}
      	var that = this;
      	var formData = new FormData();
      	formData.append("pic", file.raw);
      	axios.post('/api/plan-market/order-page/upload-pic', formData)
      		.then(response => {
      			if (response.data.msg.code == 0) {

      				that.all.credentials = response.data.data

      			} else {
      				that.$message.error(response.data.msg.info);
      			}
      		})
      },
      delimg(){
        this.all.credentials = ''
      }

    }
  };
</script>

<style scoped="less" lang="scss">
  .shiming{
    width: 1020px; margin: 0 auto;
    /deep/ .el-input__inner{ width: 310px;}
    .title{ color: #F92659; font-size: 42px; margin-bottom: 30px; padding-top: 90px;}
    .shiming_con{ border: 1px #EAEAEA solid; padding: 48px;
      .title2{ color: #F92659; font-size: 36px; text-align: center; margin-bottom: 48px;}
      .ff{  display: flex; align-items: center; margin-bottom: 30px;
        .f1{ width: 390px; text-align: right; color: #707070; font-size: 16px;}
        .f2{ margin-left: 20px;}
      }
    }
    .tijiao{width: 352px; margin: 54px auto; text-align: center; color:#fff;
height: 45px; line-height: 45px; border-radius: 5px; cursor:pointer;
background: #F92659;}


  }
</style>
